<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>触发和回滚</title>
<style type="text/css">
body{ margin: 0; }
.ef-scroll-ani-total-box{
    position: sticky;
    top: 0;
    left: 0;
    overflow: hidden;
    width: 100%;
    height: 100vh;
}
.ef-scroll-ani{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    will-change: opacity;
}
.ef-scroll-ani .ef-scroll-ani-trigger{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}
.ef-scroll-ani .ef-scroll-ani-inter{
    position: relative;
}
</style>
<style type="text/css">
.grey{ width: 200px; height: 100px; border: 1px solid #DDD; text-align: center;}
.grey.active{ width: 500px; }
</style>
<style type="text/css">
.full-box-a{ width: 100%; height: 400vh; }
.full-box-b{ width: 100%; height: 300vh; }
</style>
<style type="text/css">
.ef-scroll-ani-a1{ z-index: 5; }
.ef-scroll-ani-a2 .ef-scroll-ani-trigger{  opacity: 0;}
.ef-scroll-ani-a3 .ef-scroll-ani-trigger{  opacity: 0;}
.ef-scroll-ani-a4 .ef-scroll-ani-trigger{  opacity: 0;}
</style>
</head>
<body>
    <div id='trigger-1'></div>
    <div class="full-box-a">
        <div class='ef-scroll-ani-total-box'>
            <div class="ef-scroll-ani ef-scroll-ani-a1">
                <div class="ef-scroll-ani-trigger">
                    <div class='ef-scroll-ani-inter'>
                        <div class="grey greyB1">b1</div>
                        <div class="grey greyB2">b2</div>
                        <div class="grey greyB3">b3</div>
                        <div class="grey greyB4">b4</div>
                    </div>
                </div>
            </div>
            
            <div class="ef-scroll-ani ef-scroll-ani-a2">
                <div class='ef-scroll-ani-trigger'>
                    <div class='ef-scroll-ani-inter'>
                        <div class="grey greyB1">a22</div>
                    </div>
                </div>
            </div>

            <div class="ef-scroll-ani ef-scroll-ani-a3">
                <div class='ef-scroll-ani-trigger'>
                    <div class='ef-scroll-ani-inter'>
                        <div class="grey greyB1">a333</div>
                    </div>
                </div>
            </div>

            <div class="ef-scroll-ani ef-scroll-ani-a4">
                <div class='ef-scroll-ani-trigger'>
                    <div class='ef-scroll-ani-inter'>
                        <div class="grey greyB1">a444</div>
                    </div>
                </div>
            </div>

        </div>
    </div>

    <div id='trigger-2'></div>
    <div class="full-box-b">
        <div class='ef-scroll-ani-total-box'>
            <div class="ef-scroll-ani ef-scroll-ani-b1">
                <div class="ef-scroll-ani-trigger">
                    <div class='ef-scroll-ani-inter'>
                        <div class="grey greyB1">b1</div>
                    </div>
                </div>
            </div>
            
            <div class="ef-scroll-ani ef-scroll-ani-b2">
                <div class='ef-scroll-ani-trigger'>
                    <div class='ef-scroll-ani-inter'>
                        <div class="grey greyB1">b22</div>
                    </div>
                </div>
            </div>

            <div class="ef-scroll-ani ef-scroll-ani-b3">
                <div class='ef-scroll-ani-trigger'>
                    <div class='ef-scroll-ani-inter'>
                        <div class="grey greyB1">b333</div>
                    </div>
                </div>
            </div>

        </div>
    </div>

</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.1/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.3.0/ScrollTrigger.min.js"></script>
<script>
const layoutH = window.innerHeight;
gsap.registerPlugin(ScrollTrigger);
</script>

<script>
//往回滚动不触发回位
gsap.timeline({
    scrollTrigger: {
        trigger: '#trigger-1',
        start: `${layoutH} bottom`,
        end: `+=${layoutH}`,
    }
}).to('.ef-scroll-ani-a1 .greyB1', {
    x: 400,
    rotation: 360,
    duration: 3,
    toggleClass: 'active',
    ease: 'none',
})
//如何才能让它往回滚动时回位呢
gsap.timeline({
    scrollTrigger: {
        trigger: '#trigger-1',
        start: `${layoutH + 100} bottom`,
        end: `+=${layoutH}`,
        //4 个不同的切换位置(按顺序 onEnter、onLeave、onEnterBack和onLeaveBack)
        //默认值为play none none none
        //"resume", "reset", "restart", "complete", "reverse", and "none"
        toggleActions: "restart none none reverse",
    }
}).to('.ef-scroll-ani-a1 .greyB2', {
    x: 400,
    rotation: 360,
    duration: 3,
    ease: 'none',
})
gsap.timeline({
    scrollTrigger: {
        trigger: '#trigger-1',
        scrub: true,//和滚动绑定
        start: `${layoutH} bottom`,
        end: `+=${layoutH}`,
    }
}).to('.ef-scroll-ani-a1 .greyB3', {
    x: 400,
    rotation: 360,
    duration: 3,
    ease: 'none',
})
gsap.timeline({
    scrollTrigger: {
        trigger: '#trigger-1',
        scrub: true,//和滚动绑定
        start: `${layoutH} bottom`,
        end: `+=100%`,
    }
}).to('.ef-scroll-ani-a1 .greyB4', {
    x: 400,
    rotation: 360,
    duration: 3,
    ease: 'none',
})
</script>

</html>
